<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-form ref="forms" :model="form" class="demo-form-inline" label-width="80px" :rules="rules">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="form.roleName " placeholder="角色名称" />
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input v-model="form.roleCode " placeholder="角色编码" />
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="form.remark" placeholder="角色描述" type="textarea" :rows="2" />
        </el-form-item>
        <el-form-item label="选择菜单">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0">
              <el-checkbox v-model="isExpand" :indeterminate="false" @change="expandAll">展开/关闭</el-checkbox>
            </el-col>
            <el-col :span="6" :offset="0">
              <el-checkbox v-model="isSelectAll" :indeterminate="false" @change="handleSelectAll">全选/取消权限</el-checkbox>
            </el-col>
          </el-row>
          <el-tree ref="tree" :data="menuList" :props="props" show-checkbox node-key="id" />

        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { findAllPermissions } from '@/api/auth/permission'
import { saveRolePermissions, findRolePermissions, updateRolePermissions } from '@/api/auth/role'
export default {
  data() {
    return {
      id: '',
      dialogVisible: false,
      isExpand: false,
      isSelectAll: false,
      menuList: [],
      form: {
        roleName: '',
        roleCode: '',
        remark: ''

      },
      permissionIds: [], // 权限ID
      props: {
        label: 'title',
        children: 'children'
      },
      selectKeys: [],
      rules: {
        roleName: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  created() {
    this.getlist()
  },
  methods: {
    open(id) {
      this.dialogVisible = true
      if (id) {
        this.id = id
        findRolePermissions(this.id).then(res => {
          if (res.success) {
            if (res.data.role.permissionIds) {
              this.$refs.tree.setCheckedKeys(res.data.role.permissionIds)
            }
            this.form = res.data.role
          }
        })
      } else {
        this.form = this.$options.data().form
      }
    },
    getlist() {
      findAllPermissions().then(res => {
        this.menuList = res.data.menus
      })
    },
    handleSelectAll(val) {
      if (this.isSelectAll) {
        this.selectAll(this.menuList)
        this.$refs.tree.setCheckedKeys(this.selectKeys)
      } else {
        this.$refs.tree.setCheckedKeys([])
      }
    },
    // 递归处理全选
    selectAll(menuList) {
      for (var i = 0; i < menuList.length; i++) {
        var item = menuList[i]
        this.selectKeys.push(item.id)
        if (item.children && item.children.length > 0) {
          this.selectAll(item.children)
        }
      }
    },
    expandAll(val) {
      this.setAllExpand(val)
    },
    setAllExpand(state) {
      var nodes = this.$refs.tree.store.nodesMap
      for (var i in nodes) {
        nodes[i].expanded = state
      }
    },
    save() {
      this.$refs.forms.validate((valid) => {
        if (valid) {
          //  this.permissionIds.push(this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()))
          var obj = {
            ...this.form,
            // 不包含半选
            permissionIds: this.$refs.tree.getCheckedKeys()
          }
          if (!this.id) {
            saveRolePermissions(obj).then(res => {
              if (res.success) {
                this.$message.success('新增成功')
                this.dialogVisible = false
                this.getlist()
              } else {
                this.$message.error('新增失败')
              }
            })
          } else {
            updateRolePermissions(obj).then(res => {
              if (res.success) {
                this.$message.success('修改成功')
                this.dialogVisible = false
                this.getlist()
              } else {
                this.$message.error('修改失败')
              }
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
